<!-- DialogComponent.vue -->
<template>
  <el-dialog
    v-model="visible"
    :title="title"
    width="800px"
    @close="handleClose"
  >
    <div class="dialog-content">
      <!-- 弹窗内容 -->
      <el-descriptions :column="1" border>
        <el-descriptions-item label="ID">{{ data.id }}</el-descriptions-item>
        <el-descriptions-item label="用户ID">{{ data.logUserId }}</el-descriptions-item>
        <el-descriptions-item label="用户类型">{{ data.logUserType }}</el-descriptions-item>
        <el-descriptions-item label="用户姓名">{{ data.logUserName }}</el-descriptions-item>
        <el-descriptions-item label="操作时间">{{ data.logExecuteTime }}</el-descriptions-item>
        <el-descriptions-item label="登录类型">{{ data.logType }}</el-descriptions-item>
        <el-descriptions-item label="IP">{{ data.logIp }}</el-descriptions-item>
        <el-descriptions-item label="客户端信息">{{ data.logUserAgent }}</el-descriptions-item>
        <el-descriptions-item label="是否为移动平台">{{ data.uaIsMobile === 0 ? '是' : '否' }}</el-descriptions-item>
        <el-descriptions-item label="平台">{{ data.uaPlatform }}</el-descriptions-item>
        <el-descriptions-item label="浏览器">{{ data.uaBrowser }}</el-descriptions-item>
        <el-descriptions-item label="浏览器版本">{{ data.uaBrowserVersion }}</el-descriptions-item>
        <el-descriptions-item label="引擎">{{ data.uaEngine }}</el-descriptions-item>
        <el-descriptions-item label="引擎版本">{{ data.uaEngineVersion }}</el-descriptions-item>
        <el-descriptions-item label="操作系统">{{ data.uaOs }}</el-descriptions-item>
        <el-descriptions-item label="操作系统版本">{{ data.uaOsVersion }}</el-descriptions-item>
      </el-descriptions>
    </div>
    <template #footer>
      <el-button @click="visible = false">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue'

const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  title: {
    type: String,
    default: ''
  },
  data: {
    type: Object,
    default: () => ({})
  }
})

const visible = ref(false)

const emit = defineEmits(['update:modelValue'])

watch(() => props.modelValue, (val) => {
  visible.value = val
}, { immediate: true })

const handleClose = () => {
  emit('update:modelValue', false)
}
</script>